<template>
  <view class="send">
    <view class="cardItem">
      <view class="cardTtitle">
        <view class="cardName">
          大金柜兑换卡券
        </view>
        <view class="cardNum">
          ×10
        </view>

      </view>
      <view class="cardsub">
        <text>请选择赠送的数量</text>
        <view class="cardNum">
          <uni-number-box v-model="count" :min="1"></uni-number-box>
        </view>
      </view>
      <u-gap height="2" bg-color="#E9E9E9"></u-gap>
      <view class="cardButton">
        <view class="btn" @click="showShareMenu">去赠送</view>
      </view>
    </view>
    <u-popup
      mode="bottom"
      class="popup-container"
      v-model="visible"
      :border-radius="48">

      <view class="popup-content" >
        <view class="container">
          <view style="display: flex;margin-top: 32rpx">
            <button class="shareBtn friend" open-type="share">
              <view class="imgView">

              </view>
              分享给好友
            </button>
            <button class="shareBtn friend" @click="copyLink()">
              <view class="imgView">

              </view>
              复制链接
            </button>
          </view>
        </view>
        <view class="cancelbutton">
          <view @click="visible = false" class="cancel">取消</view>
        </view>
      </view>

    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      visible: false
    };
  },
  methods: {
    copyLink() {
      const link = 'https://example.com'; // 要复制的链接
      uni.setClipboardData({
        data: link, // 需要复制的内容
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success',
            duration: 2000
          });
        },
        fail: (err) => {
          console.error('复制失败:', err);
          uni.showToast({
            title: '复制失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    showShareMenu() {
      this.visible = true;
    }
  },
  computed: {

  },
  watch: {

  },
  // 页面周期函数--监听页面加载
  onLoad() {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {},
  // 页面上拉触底事件的处理函数
  onReachBottom() {},
  // 用户点击右上角分享
  onShareAppMessage() {
    return {
      title: '珍错房',
      summary: '分享摘要',
      path: 'pages/index/index',
      imageUrl: this.staticDir + '/left.jpg'
    };
  },
  // 页面处理函数--监听页面滚动(not-nvue)
  onPageScroll(e) {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
<style lang="scss">
.popup-content {

  .container {
    .friend {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: unset;
      color: #999 !important;
      font-size: 28rpx;
      margin: 0;
      .imgView {
        width: 70rpx;
        height: 70rpx;
        background: rgb(218, 218, 218);
        border-radius: 50%;
      }
    }
  }
  .cancelbutton{
    text-align: center;
    border-top: 2rpx solid #c5c5c5;
    padding: 30rpx 0 calc(20rpx + env(safe-area-inset-bottom));
    margin-top: 30rpx;
  }
}
</style>
